<template>
    <view class="container">

        <view :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.1s;">
            <uni-section class="mb-10" title="扫码作品征集" type="line">
                <view class="menu">
                    <view class="menuItem" @click="toPages('/workCollecting/createInfoForm')">
                        <view class="thumbnail" style="background-color: #2F54EB;">
                            <uni-icons type="folder-add" size="30" color="#fff"></uni-icons>
                        </view>
                        <view>
                            创建二维码
                        </view>
                    </view>
                    <view class="menuItem" @click="toPages('/workCollecting/prepareDeclare')">
                        <view class="thumbnail-container">
                            <view class="thumbnail" style="background-color: #0079FD;">
                                <uni-icons type="flag" size="30" color="#fff"></uni-icons>
                            </view>
                            <view class="badge">99+</view>
                        </view>
                        <view>
                            预申报作品
                        </view>
                    </view>
                    <view class="menuItem" @click="toPages('/workCollecting/prepareOrder')">
                        <view class="thumbnail-container">
                            <view class="thumbnail" style="background-color: #37A8D1;">
                                <uni-icons type="settings" size="30" color="#fff"></uni-icons>
                            </view>
                            <view class="badge">30</view>
                        </view>
                        <view>
                            预申报订单
                        </view>
                    </view>
                </view>
            </uni-section>
        </view>

        <view :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.2s;">
            <uni-section class="mb-10" title="财务审核" type="line">
                <view class="menu">
                    <view class="menuItem" @click="toPages('/financing/listManage')">
                        <view class="thumbnail-container">
                            <view class="thumbnail" style="background-color: #FFB733;">
                                <uni-icons type="wallet" size="30" color="#fff"></uni-icons>
                            </view>
                            <view class="badge">99+</view>
                        </view>
                        <view>
                            财务列表
                        </view>
                    </view>
                    <view class="menuItem" @click="toPages('/financing/posterList')">
                        <view class="thumbnail-container">
                            <view class="thumbnail" style="background-color: #FF8733;">
                                <uni-icons type="email" size="30" color="#fff"></uni-icons>
                            </view>
                            <view class="badge">1</view>
                        </view>
                        <view>
                            海报列表
                        </view>
                    </view>
                    <view class="menuItem" @click="toPages('/financing/authorizationList')">
                        <view class="thumbnail-container">
                            <view class="thumbnail" style="background-color: #FF6763;">
                                <uni-icons type="map" size="30" color="#fff"></uni-icons>
                            </view>
                            <view class="badge">3</view>
                        </view>
                        <view>
                            授权书列表
                        </view>
                    </view>
                </view>
            </uni-section>
        </view>

        <view :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.3s;">
            <uni-section class="mb-10" title="评审管理" type="line">
                <view class="menu">
                    <view class="menuItem" @click="toPages('/review/listManage')">
                        <view class="thumbnail-container">
                            <view class="thumbnail" style="background-color: #04D368;">
                                <uni-icons type="calendar" size="30" color="#fff"></uni-icons>
                            </view>
                            <view class="badge">66</view>
                        </view>
                        <view>
                            评审列表
                        </view>
                    </view>
                </view>
            </uni-section>
        </view>

        <view :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.4s;">
            <uni-section class="mb-10" title="订单管理" type="line">
                <view class="menu">
                    <view class="menuItem" @click="toPages('/sales/listManage')">
                        <view class="thumbnail-container">
                            <view class="thumbnail" style="background-color: #2DC5CC;">
                                <uni-icons type="bars" size="30" color="#fff"></uni-icons>
                            </view>
                            <view class="badge">10</view>
                        </view>
                        <view>
                            订单列表
                        </view>
                    </view>
                </view>
            </uni-section>
        </view>

        <view :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.5s;">
            <uni-section class="mb-10" title="系统管理" type="line">
                <view class="menu">
                    <!-- <view class="menuItem">
                        <view class="thumbnail" style="background-color: #BDBDBD;">
                            <uni-icons type="person" size="30" color="#fff"></uni-icons>
                        </view>
                        <view>
                            用户管理
                        </view>
                    </view>
                    <view class="menuItem">
                        <view class="thumbnail" style="background-color: #BDACAC;">
                            <uni-icons type="list" size="30" color="#fff"></uni-icons>
                        </view>
                        <view>
                            菜单管理
                        </view>
                    </view>
                    <view class="menuItem">
                        <view class="thumbnail" style="background-color: #9D9D9D;">
                            <uni-icons type="compose" size="30" color="#fff"></uni-icons>
                        </view>
                        <view>
                            日志管理
                        </view>
                    </view> -->
                    <view class="menuItem" @click="toPages('/pages/login')">
                        <view class="thumbnail" style="background-color: #666;">
                            <uni-icons type="minus" size="30" color="#fff"></uni-icons>
                        </view>
                        <view>
                            退出登录
                        </view>
                    </view>
                </view>
            </uni-section>
        </view>


    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// 状态定义 -------------------------------------------------------------
const loading = ref(false) // 加载状态
const showAnimation = ref(false) // 动画状态


// 生命周期钩子 ------------------------------------------------------------
onMounted(() => {
    init()
})

onShow(() => {
    // 页面载入后，延时显示动画
    setTimeout(() => {
        showAnimation.value = true;
    }, 100);
})

onHide(() => {
    // 页面隐藏时，重置动画状态
    showAnimation.value = false;
})

// 方法定义 -----------------------------------------------------------------
const init = async () => {
    try {
        loading.value = true
        // 初始化逻辑
    } catch (error) {
        console.error(error)
        uni.showToast({
            title: '操作失败',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}

const toPages = (url) => {
    uni.navigateTo({
        url: url
    })
}

const notOpen = () => {
    uni.showToast({
        title: '敬请期待',
        icon: 'none'
    })
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    padding: 30rpx;
    background-color: #f5f5f5;

    .menu {
        display: flex;
        align-items: center;
        padding: 30rpx;

        .menuItem {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #333;

            .thumbnail-container {
                position: relative;

                .badge {
                    position: absolute;
                    top: -6px;
                    right: -6px;
                    background-color: #FF4D4F;
                    color: white;
                    font-size: 10px;
                    padding: 2px 6px;
                    border-radius: 10px;
                    min-width: 20px;
                    text-align: center;
                    box-shadow: 0 0 0 2px white;
                }
            }

            .thumbnail {
                width: 100rpx;
                height: 100rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 15rpx;
                margin-bottom: 10rpx;
            }
        }
    }
}

// 动画效果
.card-animate {
    opacity: 0;
    transform: translateY(20rpx);
    animation: fadeInUp 0.5s forwards;
}

.cancel-login {
    color: #2b92ff;
    text-align: center;
    letter-spacing: 5rpx;
    font-size: 32rpx;
    margin-top: 40rpx;
    width: 100%;
    border-radius: 30rpx;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>